<template>
  <div>
    <h3>7、v-if使用</h3>
    <div v-if="age == 1">A </div>
    <div v-else-if="age==2">B</div>
    <div v-else>C</div>

    <h3>8、v-show 使用</h3>
    <div v-if="age == 1">v-if A </div>
    <div v-show=" age == 1">v-show A</div>

    <h3>v-for 使用</h3>
    <div>循环数组
      <ul>
        <li v-for="(item,index) in list" :key="index">{{index}} - {{item.name}}- {{item.age}}</li>

      </ul>
    </div>

    <div>循环对象
      <ul>
        <li v-for="(value,key,index) in items" :key="index">{{index}} - {{key}}- {{value}}</li>

      </ul>
    </div>

    <h3>1、v-text使用</h3>
    <div v-text="text"></div>
    <div>{{text}}</div>

    <h3>2、v-html使用</h3>
    <div v-html="text"></div>

    <h3>3、v-bind使用</h3>
    <div v v-bind:title='title'></div>
    <div><a v-bind:href="href">跳转</a></div>

    <div><a :href="href">跳转</a></div>
    <div><button :disabled="disabled">禁用按钮</button></div>

    <h3>4、v-on使用</h3>
    <el-button v-on:click="clickOn()" type="primary">按钮</el-button>
    <el-button @click="clickOn()" type="primary">按钮</el-button>

    <h3>v-model 使用</h3>
    <el-input v-model="age"></el-input>
    <span>{{age}}</span>
    <el-button type="primary" @click="add">年龄</el-button>

    <h3>5、v-pre 使用</h3>
    <div v-pre>
      <div>{{age}}</div>
    </div>
    <div>{{age}} </div>

    <h3>6、v-once 使用</h3>
    <div v-once>v-once {{age}}</div>
    <div>{{age}}</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      text: "<div style='font-size: 30px;'>片言</div>",
      title: '片言分享',
      href: 'https://docs.qq.com/doc/DVUtETEdoRXdQY2xT?&u=8dcf0ac2c0fc4764916f481e10150e6b',
      disabled: false,

      age: 1,

      list: [
        {
          name: 'asen',
          age: 18,
        },
        {
          name: 'xiaohua',
          age: 19,
        }, {
          name: 'xiaoming',
          age: 19,
        },
      ],
      items: {
        name: 'xiaohua',
        age: 19,
      },

    }
  },

  methods: {
    clickOn () {
      console.log(123123213213)

    },

    add () {
      this.age = this.age + 1
    }
  }

}
</script>


<style scoped>
</style>